<template>
  <div class="data-table-container">
    <van-calendar
      v-model="selectedDate"
      :show-confirm="false"
      @change="onDateChange"
      title="选择日期"
      :poppable="false"
      :style="{ height: '400px' }"
    />

    <van-table :data="tableData" border stripe>
      <van-table-column prop="date" label="日期" width="180"></van-table-column>
      <van-table-column prop="value" label="数值"></van-table-column>
      <!-- 可以根据需要添加更多列 -->
    </van-table>
    <van-progress :percentage="50" />
    <div class="circle-wrapper">
      <!-- 添加包装元素 -->
      <van-circle v-model="currentRate" :rate="75" :speed="100" :text="text" />
    </div>
  </div>
</template>

<script>
// 导入 Vant 组件
import { Calendar, Progress, Circle } from "vant";

import "vant/lib/index.css";
import axios from "axios";

export default {
  name: "DataTable",
  components: {
    "van-calendar": Calendar,
    "van-table": "van-table",
    "van-table-column": "van-table-column",
    "van-progress": Progress,
    "van-circle": Circle,
  },
  data() {
    return {
      selectedDate: null,
      tableData: [],
      currentRate: 0,
    };
  },
  computed: {
    text() {
      return this.currentRate.toFixed(0) + "%";
    },
  },
  methods: {
    async onDateChange(date) {
      this.selectedDate = date.toString();
      try {
        const response = await axios.get(`/api/data?date=${this.selectedDate}`);
        if (response.status === 200) {
          this.tableData = response.data.data;
        } else {
          console.error("无法获取数据:", response.statusText);
        }
      } catch (error) {
        console.error("请求失败:", error);
      }
    },
  },
};
</script>

<style scoped>
/* 选择一个颜色主题 */
:root {
  --primary-color: #409eff; /* 蓝色主题 */
  --secondary-color: #f5f7fa; /* 浅色背景 */
  --text-color: #303133; /* 文本颜色 */
}

/* 容器样式 */
.data-table-container {
  padding: 20px; /* 添加内边距 */
  background-color: var(--secondary-color); /* 设置背景颜色 */
  color: var(--text-color); /* 设置文本颜色 */
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif; /* 设置字体 */
}

/* 表格样式 */
.van-table {
  margin-top: 20px; /* 与日历组件保持间距 */
  border-color: #ebeef5; /* 设置边框颜色 */
}

/* 进度条样式 */
.van-progress {
  margin-top: 20%; /* 与表格保持间距 */
  background-color: #f0f0f0; /* 设置背景颜色 */
  color: var(--primary-color); /* 设置进度条颜色 */
}

/* 圆环进度条样式 */
.van-circle {
  margin-top: 20px; /* 与进度条保持间距 */
  color: var(--primary-color); /* 设置进度条颜色 */
}

.circle-wrapper {
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（如果需要） */
  margin-top: 40px; /* 与进度条保持间距 */
}
</style>
